<template>
    <div class="detail-container" v-loading="loading">
        <div style="position: absolute;top:200px;right:30%;" v-if="orderInfo.isDelete">
            <img :src="zhoufei" />
        </div>
        <el-card shadow="never" style="margin-top: 15px;" class="detail-form">
            <div class="operate-container" style="text-align: center" v-if="!orderInfo.isDelete">
                <el-checkbox v-model="checked" style="margin-right:30px;">显示合同章</el-checkbox>
                <el-button type="primary"  style="width:180px;" @click="showPrint">打印发货单 <span style="font-size:12px;">（已打印 {{orderInfo.hasPrintNum}} 次）</span></el-button>
            </div>
            <div style="margin-top:20px">
                <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
                <span class="font-small">基本信息</span>
            </div>
            <el-form  size="mini" label-width="150px" style="margin-top:20px">
                <el-col :span="8">
                    <el-form-item label="发货单号：">{{orderInfo.deliverSn}}</el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="客户编号：">{{orderInfo.customerNumber}}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="客户名称：" v-if="orderInfo.isShowCustomerName">{{orderInfo.customerName}}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="发货日期：">{{orderInfo.shipTime}}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="业务员：">{{orderInfo.userName}}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="单据类型：">{{orderInfo.deliverType == 1 ? '发货单' : '退货单'}}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="送货类型：">
                        {{orderInfo.sendType}}
                        <el-button type="text" style="margin-left:10px" @click="showDetail6" v-if="type == 'edit'">修改</el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="本次发货数量：">{{orderInfo.goodsNum}}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="报销状态：">{{orderInfo.settlementState == 1 ? '已报销' : '未报销'}}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="报销日期：">{{orderInfo.settlementDate}}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="发货备注：">{{orderInfo.remark}}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="合同公司：">{{orderInfo.companyName}}</el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="收货信息：">{{orderInfo.receiveInfo}}</el-form-item>
                </el-col>
            </el-form>
            <div style="margin-top: 20px;clear: both">
                <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
                <span class="font-small">商品信息</span>
            </div>
            <el-table
                    ref="orderItemTable"
                    :data="orderInfo.deliverGoods"
                    :summary-method="getSummaries"
                    show-summary
                    style="width: 100%;margin-top: 20px;box-sizing: border-box" border>
                <el-table-column label="商品名称" width="200">
                    <template slot-scope="scope">
                        {{scope.row.goodsName}}/ {{scope.row.goodsSn}}
                    </template>
                </el-table-column>
<!--                <el-table-column label="合同数量" width="100">-->
<!--                    <template slot-scope="scope">-->

<!--                    </template>-->
<!--                </el-table-column>-->
                <el-table-column label="单位"
                                 width="100"  align="center">
                    <template slot-scope="scope">
                        {{scope.row.goodsUnit}}
                    </template>
                </el-table-column>
                <el-table-column label="数量" width="100" align="center">
                    <template slot-scope="scope">
                        {{scope.row.goodsNum}}
                    </template>
                </el-table-column>
                <el-table-column label="合同单号" width="130" align="center">
                    <template slot-scope="scope">
                        {{scope.row.orderSn}}
                    </template>
                </el-table-column>
                <el-table-column label="批号" width="130" align="center">
                    <template slot-scope="scope">
                        {{scope.row.batchNo}}
                    </template>
                </el-table-column>
                <el-table-column label="合同发货类型" width="130" align="center" label-class-name="bgth">
                    <template slot-scope="scope">
                        {{scope.row.orderSendType}}
                    </template>
                </el-table-column>
                <el-table-column label="预计发货仓库" width="130" align="center">
                    <template slot-scope="scope">
                        {{scope.row.warehouseName}}
                    </template>
                </el-table-column>
                <el-table-column label="实际发货仓库" width="130" align="center">
                    <template slot-scope="scope">
                        {{scope.row.shipWarehouse}}
                    </template>
                </el-table-column>
                <el-table-column label="运联含税运费" width="130" align="center">
                    <template slot-scope="scope">
                        {{scope.row.ogFreight}}
                    </template>
                </el-table-column>
                <el-table-column label="实际含税运费" width="130" align="center">
                    <template slot-scope="scope">
                        {{scope.row.ogActualFreight}}
                    </template>
                </el-table-column>
                <el-table-column label="备注" >
                    <template slot-scope="scope">
                        {{scope.row.orderRemark}}
                    </template>
                </el-table-column>
                <el-table-column label="收货确认函" width="100" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <div @click="fullImg2(item)" style="color:#409EFF;cursor: pointer;word-break:break-all" v-for="item in scope.row.confirmationPic">查看附件</div>
                  </template>
                </el-table-column>
            </el-table>
            <div style="text-align: right;margin-top:20px;font-size:14px;" v-if="type == 'see'">本单运费：{{orderInfo.actualFreight && orderInfo.actualFreight != '' ? orderInfo.actualFreight : '--'}}</div>

            <el-alert
                    style="margin-top:20px;"
                    :closable="false"
                    type="warning"
                    show-icon>
                <template slot="title">
                    <div style="color:#606266">特殊需求</div>
                </template>
                <template>
                    <div style="padding-bottom:10px;color:#606266;line-height: 22px">
                        <span style="padding-right:15px;white-space:nowrap;">客户行业：<span style="font-weight: bold;font-size:14px;color:Red">{{orderInfo.customerIndustry}}</span></span>
                        <span style="padding-right:15px;white-space:nowrap;">是否工厂直发：<span style="font-weight: bold;font-size:14px;color:Red">{{orderInfo.isFactoryDeliver == 1 ? '是' : orderInfo.isFactoryDeliver == 2 ?'否' : '--'}}</span></span>
                        <span style="padding-right:15px;white-space:nowrap;">生产日期：<span style="font-weight: bold;font-size:14px;color:Red">{{orderInfo.productionDate != '' ? orderInfo.productionDate : '--'}}</span></span>
                        <span style="padding-right:15px;white-space:nowrap;">真空率：<span style="font-weight: bold;font-size:14px;color:Red">{{orderInfo.packingRequire != '' ? orderInfo.packingRequire : '--'}}</span> </span>
                        <span style="padding-right:15px;white-space:nowrap;">破包率：<span style="font-weight: bold;font-size:14px;color:Red">{{orderInfo.brokenRate != '' ? orderInfo.brokenRate : '--'}}</span> </span>
                        <span style="padding-right:15px;white-space:nowrap;">节假日是否收货：<span style="font-weight: bold;font-size:14px;color:Red">{{orderInfo.isHolidayCanSend == 2 ? '周六周日都不收货' : orderInfo.isHolidayCanSend == 3 ?'周日不收货' : '--'}}</span></span>
                        <span style="padding-right:15px;white-space:nowrap;">是否为同一批次产品：<span style="font-weight: bold;font-size:14px;color:Red">{{orderInfo.batchRequire != '' ? orderInfo.batchRequire : '--' }}</span></span>
                        <span style="padding-right:15px;white-space:nowrap;">备注：<span style="font-weight: bold;font-size:14px;color:Red">{{orderInfo.buyerRemark ? orderInfo.buyerRemark : '--' }}</span></span>
                    </div>
                </template>
            </el-alert>

            <div style="margin-top: 20px;clear: both">
                <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
                <span class="font-small">关联发货单</span>
            </div>
            <el-table
                    ref="orderItemTable"
                    :data="orderInfo.relationDeliverGoods"
                    style="width: 100%;margin-top: 20px;box-sizing: border-box" border>
                <el-table-column label="发货单号" width="150">
                    <template slot-scope="scope">
                            {{scope.row.deliverSn}}
                    </template>
                </el-table-column>
                <el-table-column label="合同单号" width="150">
                    <template slot-scope="scope">
                        {{scope.row.orderSn}}
                    </template>
                </el-table-column>
                <el-table-column label="商品"
                                 width="200"  align="center">
                    <template slot-scope="scope">
                            {{scope.row.goodsName}} / {{scope.row.goodsSn}}
                    </template>
                </el-table-column>
                <el-table-column label="合同数量" width="100" align="center">
                    <template slot-scope="scope">
                        {{scope.row.orderGoodsNum}}
                    </template>
                </el-table-column>
                <el-table-column label="发货数量" width="100" align="center">
                    <template slot-scope="scope">
                        {{scope.row.deliverGoodsNum}}
                    </template>
                </el-table-column>
                <el-table-column label="运联含税运费" width="130" align="center">
                    <template slot-scope="scope">
                        {{scope.row.ogFreight}}
                    </template>
                </el-table-column>

            </el-table>

            <div style="overflow: hidden;margin-top:40px">
                <div style="clear: both">
                    <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
                    <span class="font-small">司机信息</span>
                    <el-button size="small" type="text" style="margin-left:20px;" @click="showDetail" v-if="orderInfo.settlementState!=1 && type == 'edit' &&  !orderInfo.isDelete && orderInfo.sendType!='自提'">修改司机信息</el-button>
                </div>
                <el-form  size="mini" label-width="150px" style="margin-top:20px">
                    <el-col :span="6">
                        <el-form-item label="司机姓名：">{{orderInfo.driverName}}</el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="手机号：">{{orderInfo.driverPhone}}</el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="车牌号：">{{orderInfo.driverCardNo}}</el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="派单员：">{{orderInfo.driverChargeUserName}}</el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="备注：">{{orderInfo.driverRemark}}</el-form-item>
                    </el-col>

                </el-form>
            </div>

            <div style="overflow: hidden" v-if="type == 'edit' || type == 'caiWu' || type == 'see'">
                <div style="margin-top: 40px;clear: both">
                    <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
                    <span class="font-small">费用信息</span>
                    <el-button size="small" type="text" style="margin-left:20px;" @click="showFeiYongDetail" v-if="orderInfo.settlementState!=1&& type == 'edit' &&  !orderInfo.isDelete && orderInfo.sendType!='自提'">修改费用信息</el-button>
                </div>
                <el-form  size="mini" label-width="150px" style="margin-top:20px">
                    <el-col :span="8">
                        <el-form-item label="销售合同运联含税运费：">{{orderInfo.orderInputFreight}}</el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="实际运费（含税）：">{{orderInfo.actualFreightTax}}</el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="实际运费：">{{orderInfo.actualFreight}}</el-form-item>
                    </el-col>
                    <el-col :span="8"  v-if="type == 'edit' || type == 'caiWu' || orderInfo.isAdmin == 1">
                        <el-form-item label="司机运费：">{{orderInfo.driverExpress}}</el-form-item>
                    </el-col>
                    <el-col :span="8" v-if="type == 'edit' || type == 'caiWu'">
                        <el-form-item label="物流利润：">{{orderInfo.freightProfit}}</el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="费用类型：">
                            {{orderInfo.freightType | fifType}}
                            <el-button size="small" type="text" style="margin-left:20px;padding-bottom:0;padding-top:0px" @click="showFeiYongDetail2('freightType')" v-if="changeFreightType">修改</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" v-if="type == 'edit' || type == 'caiWu'">
                        <el-form-item label="收款人：">{{orderInfo.payeeUsername}}  <span style="padding-left:15px"> {{orderInfo.isHasBill == 1 ? '有票据' : '无票据'}} </span></el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="运满满订单号：">
                            {{orderInfo.yunManManSn}}
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="运费差异：" >
                            <span style="color:red">{{orderInfo.diffFreight}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="差异承担：" >
                            {{orderInfo.diffFreightType | fifType}}
                            <el-button size="small" type="text" style="margin-left:20px;padding-bottom:0;padding-top:0px" @click="showFeiYongDetail2('diffFreightType')" v-if="changeFreightType">修改</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="备注：" >
                            {{orderInfo.expressRemark}}
                        </el-form-item>
                    </el-col>


                  <el-col :span="8">
                    <el-form-item label="采购运费：" >
                      {{orderInfo.actualFreight}}
                      <el-button size="small" type="text" style="margin-left:20px;padding-bottom:0;padding-top:0px" @click="showCgFreight" v-if="orderInfo.sendType == '采购发货'">修改</el-button>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="上传凭证：" v-if="type == 'edit' || type == 'caiWu' || type == 'see' ">
                      <img :src="item" v-for="item in orderInfo.costVoucher" @click="fullImg(item)" style="width:100px;height:100px;object-fit:contain;cursor: pointer;margin-right:5px"/>
                    </el-form-item>
                  </el-col>

                </el-form>
            </div>

            <div style="overflow: hidden">
                <div style="margin-top: 40px;clear: both">
                    <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
                    <span class="font-small">到货信息</span>
                    <el-button size="small" type="text" style="margin-left:20px;" @click="showSendForm" v-if="orderInfo.settlementState!=1 && type == 'edit'&& !orderInfo.isDelete">确认到货</el-button>
                    <span style="padding-left:10px;color:#888;font-size:12px">（注：确认收货后，费用信息与司机信息不可以修改）</span>
                </div>
                <el-form  size="mini" label-width="150px" style="margin-top:20px">
                    <el-col :span="8">
                        <el-form-item label="到达日期：">{{orderInfo.goodsReceiptDate}}</el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="操作人：">{{orderInfo.shipUserName}}</el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="备注：">{{orderInfo.goodsReceiptRemark}}</el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="上传凭证：">
                            <img :src="item" v-for="item in orderInfo.goodsReceipt" @click="fullImg(item)" style="width:100px;height:100px;object-fit:contain;cursor: pointer;margin-right:5px"/>
                        </el-form-item>
                    </el-col>

                </el-form>
            </div>


            <div style="margin-top: 40px;clear: both">
                <el-menu :default-active="logTab" class="el-menu-demo" mode="horizontal" @select="handleSelectLog">
                    <el-menu-item index="1" v-if="type == 'edit' || type == 'caiWu' || orderInfo.isAdmin == 1">操作记录</el-menu-item>
                    <el-menu-item index="2">变更记录</el-menu-item>
                    <el-menu-item index="3">订单备注</el-menu-item>
<!--                    <el-menu-item index="4">车辆轨迹</el-menu-item>-->
                </el-menu>
            </div>
            <div style="margin-top:20px;border:1px solid #EBEEF5;padding:20px 20px 0 20px">
                <div v-if="logTab != 4">
                    <el-timeline>
                      <el-timeline-item
                        v-for="(activity, index) in orderLogs"
                        :key="index">
                        <span><span style="padding-right:10px;">{{activity.created_at}}</span>{{activity.user_name}}：{{activity.content}} <span v-show="activity.remark && activity.remark != ''" style="color:red;padding-left:5px">备注：{{activity.remark}}</span></span>
                      </el-timeline-item>
                    </el-timeline>
                    <div style="color:#888;padding:20px;text-align: center;font-size:12px" v-if="orderLogs.length == 0">- 暂无数据 -</div>
                </div>
                <div v-else="logTab == 4">
<!--                  <trajectoryMap2 ref="trajectoryMap2"></trajectoryMap2>-->
                </div>

            </div>

        </el-card>
        <!--打印弹窗-->
        <el-dialog
                :close-on-click-modal="false"
                :beforeClose="closePrint"
                :visible.sync="dialogVisible4"
                width="900px">
            <div id="print-div">
                <div class="title">{{orderInfo.companyName}}送货单</div>
                <div class="paper-top">
                    <el-row>
                        <el-col :span="18">
                            <el-row>
                                <el-col :span="13"><span>编号：{{orderInfo.deliverSn}}</span></el-col>
                                <el-col :span="11"><span>发货日期：{{orderInfo.shipTime}}</span></el-col>
                            </el-row>
                            <el-row>
                              <el-col :span="13"><span>客户：{{orderInfo.customerName}}</span></el-col>
                              <el-col :span="11"><span>合同总数量：{{orderInfo.goodsAllNum}}/{{orderInfo.orderSendNum}}</span></el-col>
                            </el-row>
                            <el-row>
                              <el-col :span="24"><span>地址：{{orderInfo.receiveAddress}}</span></el-col>
                            </el-row>
                        </el-col>
                         <el-col :span="6">
                           <div style="overflow: hidden"><span style="float:left;width:70px">结算方式：</span><span style="float:left;width:calc(100% - 70px)">{{orderInfo.orderRemark}}</span></div>
                         </el-col>
                    </el-row>
                  <el-row>
                    <el-col :span="18">
                        <el-row>
                          <el-col :span="13"><span>电话：{{orderInfo.receiverMobile}}</span></el-col>
                          <el-col :span="11"><span>联系人：{{orderInfo.receiverName}}</span></el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="6">
                       <div v-if="orderInfo.isMoresuOnlineOrder == 1">合同类型：{{orderInfo.isMoresuOnlineOrder == 1 ? '推广': ''}}</div>
                    </el-col>
                  </el-row>
                </div>
                <div class="good-table">
                    <table cellspacing="0" cellpadding="0" border="0" width="100%">
                        <tr>
                            <th align="center" width="12.5%"><div style="white-space:nowrap;">商品名称</div></th>
                            <th align="center" width="15%"><div style="white-space:nowrap;">规格型号</div></th>
                            <th align="center" width="3%"><div style="white-space:nowrap;">单位</div></th>
                            <th align="center" width="10%"><div style="white-space:nowrap;">发货数量</div></th>
                            <th align="center" width="14%"><div style="white-space:nowrap;">金额</div></th>
                            <th align="center" width="12.5%"><div style="white-space:nowrap;">合同单号</div></th>
                            <th align="center" ><div style="white-space:nowrap;">备注</div></th>
                        </tr>
                        <tr v-for="item in orderInfo.deliverGoods">
                            <td align="center"><div style="word-break:break-all">{{item.goodsName}}</div></td>
                            <td align="center"><div style="white-space:nowrap;font-size:12px;">{{item.goodsSn}}</div></td>
                            <td align="center" style="white-space:nowrap;width:40px">{{item.goodsUnit}}<div></div></td>
                            <td align="center" style="white-space:nowrap;"><div>{{item.goodsNum}}</div></td>
                            <td align="center"><div style="white-space:nowrap;"> </div></td>
                            <td align="center"><div style="white-space:nowrap;">{{item.orderSn}}</div></td>
                            <td align="center"><div style="word-break:break-all;min-width:60px">{{item.orderRemark}}</div></td>
                        </tr>
                        <tr>
                            <td colspan="3" align="center">数量合计</td>
                            <td colspan="4">{{orderInfo.goodsNum}}</td>
                        </tr>
                    </table>
                </div>
                <div class="paper-bottom" style="position: relative">
                    <img :src="orderInfo.companyImage" style="position: absolute;right: 165px; width: 156px;top: 30px;" v-if="checked"/>
                    <el-row>
                        <el-col :span="8"><span>提货人及公司(签字)</span></el-col>
                        <el-col :span="6" style="text-align: center"><span>客户签收(盖公章)</span></el-col>
                        <el-col :span="6" style="text-align: right"><span>业务员：{{orderInfo.userName}}</span></el-col>
                       <el-col :span="4" style="text-align: right"><span>制单：{{orderInfo.authName}}</span></el-col>
                    </el-row>
                    <el-row style="margin-top:20px;">
                        <el-col :span="12"><span style="font-weight: bold">客户其他需求：</span></el-col>
                    </el-row>
<!--                    <el-row>-->
<!--                        <el-col :span="12" :offset="12"><span>地址：</span></el-col>-->
<!--                    </el-row>-->
<!--                    <el-row>-->
<!--                        <el-col :span="12" :offset="12"><span>网址：</span></el-col>-->
<!--                    </el-row>-->
<!--                    <el-row>-->
<!--                        <el-col :span="12" :offset="12"><span>邮箱：</span></el-col>-->
<!--                    </el-row>-->
                    <el-row style="margin-top:10px">
                        <div style="display: inline-block">
                            <div>注：本单白色联为（发货联），红色为（客户联），蓝色为(销售部),绿单为(仓库联)，黄色为(存根联)</div>
                            <div style="text-indent:2em;">是否需要收货确认函：<span>{{ orderInfo.isNeedReceived==1?'是':'否' }}</span></div>
                            <div style="text-indent:2em;">收货确认函上传状态：<span>{{ orderInfo.isHasUploadReceived==1?'已上传':'未上传' }}</span></div>
                            <div style="text-align: right">仓库发货人签字:</div>
                        </div>
<!--                        <el-col :span="24">注：本单白色联为（发货联），红色为（客户联），蓝色为(销售部),绿单为(仓库联)，黄色为(存根联)-->
<!--                          <span style="padding-left:30px">仓库发货人签字：</span>-->
<!--                        </el-col>-->
                    </el-row>
<!--                    <el-row style="margin-top:10px;">-->
<!--                        <el-col :span="12" :offset="12"><span>仓库发货人签字：</span></el-col>-->
<!--                    </el-row>-->
                </div>
            </div>
            <div slot="footer" class="dialog-footer" style="text-align: center;margin-top:80px;">
                <el-button type="primary" size="small" style="width:150px;" @click="printdiv">打印</el-button>
            </div>
        </el-dialog>

        <div style="margin-top:40px;text-align: center">
<!--            <el-button  style="width:150px;" @click="goBlack">返回</el-button>-->
        </div>

        <!--编辑司机信息-->
        <el-dialog
                :close-on-click-modal="false"
                :beforeClose="handleClose"
                title="司机信息"
                :visible.sync="dialogVisible"
                width="500px">
            <el-form :model="quitForm" size="mini" label-width="120px" ref="quitForm" :rules="rules" v-if="orderInfo.sendType != '自提'">
                <el-form-item label="司机：" prop="driverName">
                    <el-input v-model="quitForm.driverName" style="width:200px"></el-input>
                </el-form-item>
                <el-form-item label="司机手机号：" prop="driverPhone">
                    <el-input v-model="quitForm.driverPhone" style="width:200px"></el-input>
                </el-form-item>
                <el-form-item label="车牌号：" prop="driverCardNo">
                    <el-input v-model="quitForm.driverCardNo" style="width:200px"></el-input>
                </el-form-item>
                <el-form-item label="备注信息：">
                    <el-input :autosize="{ minRows: 2, maxRows: 6}" type="textarea" v-model="quitForm.remark"></el-input>
                </el-form-item>
                <el-form-item label="派单员：" prop="driverChargeUserId">
                        <el-select v-model="quitForm.driverChargeUserId" filterable placeholder="请选择" clearable>
                            <el-option
                                    v-for="item in userOptionList"
                                    :key="item.userId"
                                    :label="item.userName"
                                    :value="item.userId">
                            </el-option>
                        </el-select>
                </el-form-item>
            </el-form>
            <el-form :model="quitForm" size="mini" label-width="120px" ref="quitForm" v-else>
                <el-form-item>
                        <div style="margin-bottom:10px" v-for="item in driverList">
                            <el-radio v-model="quitForm.driverId" :label="item.driverId" border style="height:auto">
                                <div style="float:right;line-height: 22px;font-size:12px;margin-top:-5px">
                                    <div>{{item.driverName}};{{item.driverMobile}}; 车牌{{item.driverCardNo}}; </div>
                                    <div>提货日期：{{item.deliveryTime}}提货数量：{{item.deliveryNum}}负责人：</div>
                                    <div>提货备注：{{item.deliveryRemark}}</div>
                                </div>
                            </el-radio>
                        </div>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                  <el-button @click="handleClose">取 消</el-button>
                  <el-button type="primary" @click="handleConfirm" :loading="btnLoading">确 定</el-button>
            </span>
        </el-dialog>


        <!--编辑费用信息-->
        <el-dialog
                :close-on-click-modal="false"
                :beforeClose="handleClose3"
                title="费用信息"
                :visible.sync="dialogVisible3"
                width="500px">
            <el-form :model="feiYongForm" size="mini" label-width="120px" ref="feiYongForm" :rules="rules3">
                <el-form-item label="运联含税运费：" prop="actualFreight">
                        {{feiYongForm.orderInputFreight}}
                </el-form-item>
                <el-form-item label="实际费用：" prop="actualFreight">
                    <el-input-number v-model="feiYongForm.actualFreight" controls-position="right"></el-input-number>
                </el-form-item>
                <el-form-item label="司机费用：" prop="driverExpress">
                    <el-input-number v-model="feiYongForm.driverExpress" controls-position="right"></el-input-number>
                </el-form-item>
                <el-form-item label="物流利润：" prop="driverExpress">
                     {{feiYongForm.actualFreight |　pricefifer(feiYongForm.driverExpress)}}
                </el-form-item>
              <el-form-item label="订单运费承担：" >
                {{orderInfo.orderFreightType | fifType}}
              </el-form-item>
                <el-form-item label="运费类型：" prop="freightType">
                    <el-select v-model="feiYongForm.freightType">
                        <el-option key="sale" label="销售承担" value="sale"></el-option>
                        <el-option key="purchase" label="采购承担" value="purchase"></el-option>
                        <el-option key="logistics" label="运联承担" value="logistics"></el-option>
                        <el-option key="customer" label="客户承担" value="customer"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="收款人：" prop="payeeUsername">
                    <el-select v-model="feiYongForm.payeeUsername" filterable placeholder="请选择" clearable>
                        <el-option :value="item.cddValue" :label="item.cddValue" :key="item.cddValue" v-for="item in shouKuanList"></el-option>
                    </el-select>
                   <el-checkbox v-model="feiYongForm.isHasBill">有票据</el-checkbox>
                </el-form-item>
                <el-form-item label="运满满订单号：" >
                    <el-input style="width:150px" v-model="feiYongForm.yunManManSn"></el-input>
                </el-form-item>
                <el-form-item label="上传凭证：" prop="costVoucher">
                    <div style="width:80px;height:80px;object-fit: contain;margin-bottom:10px;margin-right:10px;vertical-align: middle;position: relative;display:inline-block" v-for="(item,index) in feiYongForm.costVoucher ">
                        <img :src="item"  style="width:100%;height:100%;object-fit: contain;"/>
                        <i class="el-icon-error" style="cursor: pointer;position: absolute;right:0;top:0;" @click="delImg2(index)"></i>
                    </div>
                    <el-upload
                            class="avatar-uploader"
                            :data="uploadToken"
                            action="https://upload.qiniup.com"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess2">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>

                <el-form-item label="运费差异：" >
                    <span style="color:red">{{feiYongForm.orderInputFreight | fifFreight(feiYongForm.actualFreight* 1.12) }}</span>
                </el-form-item>
                <el-form-item label="差异承担：" prop="diffFreightType">
                    <el-select placeholder="请选择"  v-model="feiYongForm.diffFreightType">
                        <el-option key="sale" label="销售承担" value="sale"></el-option>
                        <el-option key="purchase" label="采购承担" value="purchase"></el-option>
                        <el-option key="logistics" label="运联承担" value="logistics"></el-option>
                        <el-option key="batch_send" label="正常分批发货" value="batch_send"></el-option>
                        <el-option key="customer" label="客户承担" value="customer"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注信息：" prop="remark">
                    <el-input :autosize="{ minRows: 2, maxRows: 6}" type="textarea" v-model="feiYongForm.remark"></el-input>
                    <el-checkbox v-model="checkedRemark" @change="changecheck">变更发货仓库</el-checkbox>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                  <el-button @click="handleClose3">取 消</el-button>
                  <el-button type="primary" @click="handleConfirm3" :loading="btnLoading3">确 定</el-button>
            </span>
        </el-dialog>

        <!--确认到货-->
        <el-dialog
                :close-on-click-modal="false"
                :beforeClose="handleClose2"
                title="确认到货"
                :visible.sync="dialogVisible2"
                width="600px">
            <el-form :model="sendForm" size="mini" label-width="120px" ref="sendForm" :rules="rules2">
                <el-form-item label="到货日期：" prop="goodsReceiptDate">
                    <el-date-picker
                            value-format="yyyy-MM-dd"
                            v-model="sendForm.goodsReceiptDate"
                            style="width:140px"
                            type="date"
                            placeholder="发货日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="上传凭证：" prop="goodsReceipt">
                    <div style="width:80px;height:80px;object-fit: contain;margin-bottom:10px;margin-right:10px;vertical-align: middle;position: relative;display:inline-block" v-for="(item,index) in sendForm.goodsReceipt ">
                        <img :src="item"  style="width:100%;height:100%;object-fit: contain;"/>
                        <i class="el-icon-error" style="cursor: pointer;position: absolute;right:0;top:0;" @click="delImg(index)"></i>
                    </div>
                    <el-upload
                            drag
                            :data="uploadToken"
                            action="https://upload.qiniup.com"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess">
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    </el-upload>
                    <el-input v-model="sendForm.goodsReceiptSrc" type="hidden" style="display: none"></el-input>
                </el-form-item>
                <el-form-item label="备注信息：">
                    <el-input :autosize="{ minRows: 2, maxRows: 6}" type="textarea" v-model="sendForm.goodsReceiptRemark"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose2">取 消</el-button>
          <el-button type="primary" @click="handleConfirm2" :loading="btnLoading2">确 定</el-button>
      </span>
        </el-dialog>

        <!--修改发货类型-->
        <el-dialog
                :close-on-click-modal="false"
                :beforeClose="handleClose6"
                title="送货类型"
                :visible.sync="dialogVisible6"
                width="400px">
            <el-form :model="sendTypeForm" size="mini" label-width="120px" ref="sendTypeForm">
                <el-form-item label="送货类型：">
                        <el-select v-model="sendTypeForm.sendType">
                            <el-option key="运联发货" label="运联发货" value="运联发货"></el-option>
                            <el-option key="采购发货" label="采购发货" value="采购发货"></el-option>
                            <el-option key="自提" label="自提" value="自提"></el-option>
                        </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose6">取 消</el-button>
          <el-button type="primary" @click="handleConfirm6" :loading="btnLoading6">确 定</el-button>
      </span>
        </el-dialog>

        <!--放大图片-->
        <el-dialog
                :visible.sync="dialogVisible5"
                width="800">
            <img :src="fullSrc" style="width:100%"/>
        </el-dialog>


        <!--编辑费用信息-->
        <el-dialog
                :close-on-click-modal="false"
                :beforeClose="handleClose4"
                title="费用信息"
                :visible.sync="dialogVisible7"
                width="500px">
            <el-form :model="feiYongForm2" size="mini" label-width="120px" ref="feiYongForm2" :rules="rules4">
                <el-form-item label="费用类型：" prop="freightType" v-if="editType == 'freightType'">
                    <el-select v-model="feiYongForm2.freightType">
                        <el-option key="sale" label="销售承担" value="sale"></el-option>
                        <el-option key="purchase" label="采购承担" value="purchase"></el-option>
                        <el-option key="logistics" label="运联承担" value="logistics"></el-option>
                        <el-option key="customer" label="客户承担" value="customer"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="差异承担：" prop="diffFreightType" v-if="editType == 'diffFreightType'">
                    <el-select placeholder="请选择"  v-model="feiYongForm2.diffFreightType">
                        <el-option key="sale" label="销售承担" value="sale"></el-option>
                        <el-option key="purchase" label="采购承担" value="purchase"></el-option>
                        <el-option key="logistics" label="运联承担" value="logistics"></el-option>
                        <el-option key="batch_send" label="正常分批发货" value="batch_send"></el-option>
                        <el-option key="customer" label="客户承担" value="customer"></el-option>
                    </el-select>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                  <el-button @click="handleClose4">取 消</el-button>
                  <el-button type="primary" @click="handleConfirm4" :loading="btnLoading4">确 定</el-button>
            </span>
        </el-dialog>

      <!--修改采购运费-->
      <el-dialog
        :close-on-click-modal="false"
        :beforeClose="handleClose9"
        title="采购运费"
        :visible.sync="dialogVisible9"
        width="600px">
        <el-form :model="cgForm" size="mini" label-width="120px" ref="cgForm" :rules="rules9">
          <el-form-item label="采购运费：" >
              <el-input style="width:150px" v-model="cgForm.actualFreightTax"></el-input>
          </el-form-item>
          <el-form-item label="上传凭证：">
            <div style="width:80px;height:80px;object-fit: contain;margin-bottom:10px;margin-right:10px;vertical-align: middle;position: relative;display:inline-block" v-for="(item,index) in cgForm.costVoucher ">
              <img :src="item"  style="width:100%;height:100%;object-fit: contain;"/>
              <i class="el-icon-error" style="cursor: pointer;position: absolute;right:0;top:0;" @click="delImg9(index)"></i>
            </div>
            <el-upload
              drag
              :data="uploadToken"
              action="https://upload.qiniup.com"
              :show-file-list="false"
              :on-success="handleAvatarSuccess9">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>
            <el-input v-model="sendForm.costVoucher" type="hidden" style="display: none"></el-input>
          </el-form-item>
          <el-form-item label="备注信息：">
            <el-input :autosize="{ minRows: 2, maxRows: 6}" type="textarea" v-model="cgForm.remark"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose9">取 消</el-button>
          <el-button type="primary" @click="handleConfirm9" :loading="btnLoading9">确 定</el-button>
      </span>
      </el-dialog>


      <!--外贸单编辑费用信息-->
      <el-dialog
        :close-on-click-modal="false"
        :beforeClose="handleClose10"
        title="费用信息"
        :visible.sync="dialogVisible10"
        width="500px">
        <el-form :model="feiYongForm10" size="mini" label-width="120px" ref="feiYongForm10" :rules="rules10">
          <el-form-item label="发货单类型：">
              外贸单
          </el-form-item>
          <el-form-item label="运联含税运费：" prop="actualFreightTax">
            <el-input-number v-model="feiYongForm10.actualFreightTax" controls-position="right"></el-input-number>
          </el-form-item>
          <el-form-item label="运费类型：" >
            <el-select v-model="feiYongForm10.freightType" disabled>
              <el-option key="sale" label="销售承担" value="sale"></el-option>
              <el-option key="purchase" label="采购承担" value="purchase"></el-option>
              <el-option key="logistics" label="运联承担" value="logistics"></el-option>
              <el-option key="customer" label="客户承担" value="customer"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="上传凭证：" prop="costVoucher">
            <div style="width:80px;height:80px;object-fit: contain;margin-bottom:10px;margin-right:10px;vertical-align: middle;position: relative;display:inline-block" v-for="(item,index) in feiYongForm10.costVoucher ">
              <img :src="item"  style="width:100%;height:100%;object-fit: contain;"/>
              <i class="el-icon-error" style="cursor: pointer;position: absolute;right:0;top:0;" @click="delImg10(index)"></i>
            </div>
            <el-upload
              class="avatar-uploader"
              :data="uploadToken"
              action="https://upload.qiniup.com"
              :show-file-list="false"
              :on-success="handleAvatarSuccess10">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="备注信息：" prop="remark">
            <el-input :autosize="{ minRows: 2, maxRows: 6}" type="textarea" v-model="feiYongForm10.remark"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
              <el-button @click="handleClose10">取 消</el-button>
              <el-button type="primary" @click="handleConfirm10" :loading="btnLoading10">确 定</el-button>
        </span>
      </el-dialog>

    </div>
</template>

<script>
    import { mapGetters } from 'vuex'
    import {formatDate} from '@/utils/date';
    import store from '@/store'
    import {deliverBill,postDeliverVoucher,getCustomerSetting,getQiniuToken,expressDeliverSet,deliverDeliverSet,deliverDeliverList,getOrderUsersList,deliverUpdate,deliverUpdatePrintNum,changeFreightType} from '@/api/partner'
    import {validateCommission} from '@/utils/validate';
    // import trajectoryMap2 from '@/views/components/trajectoryMap2'
    // import $ from 'jquery'
    import "@/utils/jQuery.print"
    import zhoufei from '@/assets/images/zhuofei.png'
    const defaultSendForm={
        deliverId: '',
        goodsReceipt: [],
        goodsReceiptRemark: '',
        goodsReceiptDate:'',
        goodsReceiptSrc:'',
    };
    const defaultCgForm={
      deliverId: '',
      costVoucher: [],
      actualFreightTax: '',
      remark:''
    };
    const defaultSendTypeForm={
        sendType: '',
    };
    export default {
        name: "customerDetail",
        data(){
            const isvalidateCommission = (rule, value, callback) => {
                if (!validateCommission(parseFloat(value))) {
                    callback(new Error('非负整数或小数'))
                } else if(value > 99999999){
                    callback(new Error('最大值为99999999'))
                }else {
                    callback()
                }
            };
            const isvalidateDiffFreightType = (rule, value, callback) => {
                 let orderInputFreight = this.feiYongForm.orderInputFreight ? this.feiYongForm.orderInputFreight : 0;
                 let actualFreight = this.feiYongForm.actualFreight* 1.12 ? this.feiYongForm.actualFreight* 1.12 : 0;
                 let num = parseFloat((orderInputFreight - actualFreight).toFixed(6))
                if ((num > 2 || num < -2) && value === '') {
                    callback(new Error('费用差异大于正负2元，此项必填'))
                }else {
                    callback()
                }
            };
            return{
                roles:store.getters.roles ? store.getters.roles : [],
                loading:false,
                deliverId:this.$route.query.id,
                type:this.$route.query.type,
                orderInfo:{},
                dialogVisible:false,
                btnLoading:false,
                quitForm:{
                    driverId:'',
                    driverName:'',
                    driverPhone:'',
                    driverCardNo:'',
                    driverChargeUserId:'',
                    remark:''
                },
                rules:{
                    driverName:[{required: true, trigger: 'blur' ,message: '请输入司机姓名',}],
                    driverPhone:[{required: true, trigger: 'blur' ,message: '请输入司机手机号',}],
                    driverCardNo:[{required: true, trigger: 'blur',message: '请输入司机车牌号',}],
                    driverChargeUserId:[{required: true, trigger: 'change',message: '请选择司机负责人',}],
                },
                dialogVisible4:false,
                sendForm:JSON.parse(JSON.stringify(defaultSendForm)),
                rules2:{
                    goodsReceiptDate:[{required: true, trigger: 'blur' ,message: '请输入到货日期',}],
                    goodsReceipt:[{required: true, trigger: 'change' ,message: '请上传到货凭证',}],
                },
                dialogVisible2:false,
                btnLoading2:false,
                imgs:[],
                uploadToken:{
                    token:''
                },
                imgDomain:'',
                dialogVisible3:false,
                btnLoading3:false,
                dialogVisible5:false,
                fullSrc:'',
                logTab:'1',
                orderLogs:[],
                feiYongForm:{
                    actualFreight:'',
                    driverExpress:'',
                    remark:'',
                    costVoucher:[],
                    payeeUsername:'',
                    freightType:'sale',
                    yunManManSn:'',
                    diffFreightType:'',
                    orderInputFreight:'',
                    isHasBill:false
                },
                driverList:[],
                rules3:{
                    actualFreight:[{required: true, trigger: 'blur' ,validator:isvalidateCommission,}],
                    driverExpress:[{required: true, trigger: 'blur' ,validator:isvalidateCommission,}],
                    payeeUsername:[{required: true, trigger: 'change' ,message:'请选择收款人'}],
                    diffFreightType:[{required: true, trigger: 'change' ,validator:isvalidateDiffFreightType,}],
                    remark:[{required: true, trigger: 'blur' ,validator:isvalidateDiffFreightType,}],
                },
                userOptionList:[],
                zhoufei:zhoufei,
                shouKuanList:[],
                sendTypeForm:JSON.parse(JSON.stringify(defaultSendTypeForm)),
                dialogVisible6:false,
                btnLoading6:false,

                rules4:{
                    freightType:[{required: true, trigger: 'change' ,message:'请选择费用类型'}],
                    diffFreightType:[{required: true, trigger: 'blur' ,message:'请选择差异承担',}],
                },
                feiYongForm2:{
                    freightType:'',
                    diffFreightType:'',
                },
                btnLoading4:false,
                dialogVisible7:false,
                editType:'',
                checked:false,
               checkedRemark:false,

              cgForm:JSON.parse(JSON.stringify(defaultCgForm)),
              btnLoading9:false,
              dialogVisible9:false,
              rules9:{},



              feiYongForm10:JSON.parse(JSON.stringify(defaultCgForm)),
              btnLoading10:false,
              dialogVisible10:false,
              rules10:{
                actualFreightTax:[{required: true, trigger: 'blur' ,validator:isvalidateCommission,}],
              },
            }
        },
        computed: {
            ...mapGetters([
                'name',
                'mobile',
                'userId'
            ]),
            changeFreightType(){
                if(this.roles.indexOf("changeFreightType") != -1){
                    return true
                }else{
                    return false
                }
            },
        },
        components : {
          // trajectoryMap2:trajectoryMap2
        },
        created() {
            this.getPageInfo();
            this.getUploadToken();
            this.getDriverList();
            this.getUserOptionList();
            this.getCustomerSettingList();
        },
        filters: {

            pricefifer(val1,val2){
                return (parseFloat(val1) - parseFloat(val2)).toFixed(2)
            },

            fifType(val){
                if(val == 'sale'){
                    return '销售承担'
                }else if(val == 'purchase'){
                    return '采购承担'
                }else if(val == 'logistics'){
                    return '运联承担'
                }else if(val == 'batch_send'){
                    return '正常分批发货'
                }else if(val == 'customer'){
                  return '客户承担'
                }
            },
            fifFreight(val1,val2){
                let v = val1 ? val1 : 0;
                let v2 = val2 ? val2 : 0;
                return parseFloat((val1 - val2).toFixed(6));
            },
        },
        methods:{
          delImg10(index){
            this.feiYongForm10.costVoucher.splice(index,1)
          },
          handleClose10(){
            this.dialogVisible10 = false;
          },
          handleConfirm10(){
            this.btnLoading10 = true;
            let data = {};
            data.deliverId = this.deliverId;
            data.actualFreightTax = this.feiYongForm10.actualFreightTax;
            data.remark = this.feiYongForm10.remark;
            data.costVoucher = this.feiYongForm10.costVoucher;
            expressDeliverSet(data).then(()=>{
              this.btnLoading10 = false;
              this.handleClose10();
              this.getPageInfo();
            }).catch(()=>{
              this.btnLoading10 = false;
            })


          },
          //上传外贸运费付款凭证
          handleAvatarSuccess10(res){
            this.feiYongForm10.costVoucher.push(this.imgDomain+res.key);
          },


          //显示采购运费
          showCgFreight(){
            this.cgForm.actualFreightTax = this.orderInfo.actualFreightTax;
            this.cgForm.remark = this.orderInfo.expressRemark;
            this.cgForm.costVoucher = JSON.parse(JSON.stringify(this.orderInfo.costVoucher));
            this.cgForm.deliverId = this.orderInfo.deliverId;
            this.dialogVisible9 = true;
          },
          delImg9(index){
            this.cgForm.costVoucher.splice(index,1)
          },
          handleClose9(){
            this.dialogVisible9 = false;
          },
          handleConfirm9(){
                this.btnLoading9 = true;
                let data = {};
                data.deliverId = this.deliverId;
                data.actualFreightTax = this.cgForm.actualFreightTax;
                data.remark = this.cgForm.remark;
                data.costVoucher = this.cgForm.costVoucher;
                expressDeliverSet(data).then(()=>{
                  this.btnLoading9 = false;
                  this.handleClose9();
                  this.getPageInfo();
                }).catch(()=>{
                  this.btnLoading9 = false;
                })


          },
          //上传采购运费付款凭证
          handleAvatarSuccess9(res){
            this.cgForm.costVoucher.push(this.imgDomain+res.key);
          },

          changecheck(){
            if(this.checkedRemark){
              this.feiYongForm.remark = '变更发货仓库'
            }else{
              this.feiYongForm.remark = ''
            }
          },
          //放大图片
          fullImg2(item){
            window.open(item)
          },
            getSummaries(param) {
                const { columns, data } = param;
                const sums = [];
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[index] = '数量合计';
                        return;
                    }
                    if (index === 3) {
                        sums[index] = this.orderInfo.allShipNum;
                    } else if(index === 8){
                        sums[index] = this.orderInfo.orderInputFreight;
                    }else{
                        sums[index] = '';
                    }
                });

                return sums;
            },
            getImgUrl(url) {
                this.form.bgImage = url
            },
            getModalStatus(obj) {
                this.cropperImg = obj.cropperImg;
                this.isShowCropper = obj.cropperShow;
            },

            // 文件上传-接口-上传文件
            postUploadFile(blob) {
                //将blob转换为file
                let file = new File([blob], '图片.png', { type: 'image/png', lastModified: Date.now() });
                file.uid = Date.now();
                var fd = new FormData();
                fd.append("file", file, "图片.png");
                fd.append("project", "micropark_coordination");

                uploadFile(fd).then(res => {
                    if (res.code === 200) {
                        this.form.bgImage = res.browser;
                        //  this.$refs.upload.clearFiles()
                        this.isShowCropper = false;
                        this.cropperImg = null;
                        this.cropperFile = {};
                    }
                });
            },
            showDetail6(){
                this.dialogVisible6 = true;
                this.sendTypeForm.sendType = this.orderInfo.sendType;
            },
            handleClose6(){
                this.dialogVisible6 = false;
            },
            handleConfirm6(){
                this.btnLoading6 = true;
                deliverUpdate({deliverId:this.$route.query.id,sendType:this.sendTypeForm.sendType}).then(()=>{
                    this.btnLoading6 = false;
                    this.handleClose6();
                    this.getPageInfo();
                }).catch(()=>{
                    this.btnLoading6 = false;
                })
            },
            //获取员工下拉选项
            getUserOptionList(){
                getOrderUsersList({type:'物流'}).then((res)=>{
                    this.userOptionList = res;
                })
            },
            //获取发货单司机列表
            getDriverList(){
                deliverDeliverList({deliverId:this.deliverId}).then((res)=>{
                    this.driverList = res;
                })
            },
            //切换log类型
            handleSelectLog(key){
                this.logTab = key;
                this.orderLogs = [];
                if(key==1){
                    this.orderLogs = this.orderInfo.logs.logByA
                }else if(key == 2){
                    this.orderLogs = this.orderInfo.logs.logByB
                }else{
                    this.orderLogs = this.orderInfo.logs.logByC
                }
            },
            //放大图片
            fullImg(item){
                this.dialogVisible5 = true;
                this.fullSrc = item
            },
            //显示打印弹窗
            showPrint(){
                this.dialogVisible4 = true;
            },
            //关闭打印弹窗
            closePrint(){
                console.log("asfasdf")
                this.dialogVisible4 = false;
                this.getPageInfo()
            },

            //打印
            printdiv(){
                deliverUpdatePrintNum({deliverId:this.$route.query.id});
                $("#print-div").print({
                    globalStyles:true,//是否包含父文档的样式，默认为true
                    mediaPrint:true,//是否包含media='print'的链接标签。会被globalStyles选项覆盖，默认为false
                    stylesheet:null,//外部样式表的URL地址，默认为null
                    noPrintSelector:".no-print",//不想打印的元素的jQuery选择器，默认为".no-print"
                    iframe:true,//是否使用一个iframe来替代打印表单的弹出窗口，true为在本页面进行打印，false就是说新开一个页面打印，默认为true
                    append:null,//将内容添加到打印内容的后面
                    prepend:null,//将内容添加到打印内容的前面，可以用来作为要打印内容
                    deferred: $.Deferred()//回调函数
                });
            },

            //获取七牛TOKEN
            getUploadToken(){
                getQiniuToken().then((res)=>{
                    this.uploadToken.token = res.token;
                    this.imgDomain = res.domain
                })
            },
            //
            changeGoodsReceiptSrc(){
                this.sendForm.goodsReceiptSrc = this.sendForm.goodsReceipt.join(",")
            },
            //上传图片
            handleAvatarSuccess(res){
                this.sendForm.goodsReceipt.push(this.imgDomain+res.key);
                this.changeGoodsReceiptSrc();
            },

            //删除图片
            delImg(index){
                this.sendForm.goodsReceipt.splice(index,1)
                this.changeGoodsReceiptSrc();
            },

            //上传图片
            handleAvatarSuccess2(res){
                this.feiYongForm.costVoucher.push(this.imgDomain+res.key);

            },

            //删除图片
            delImg2(index){
                this.feiYongForm.costVoucher.splice(index,1)
            },


            //显示收货
            showSendForm(){
                this.sendForm.goodsReceipt = JSON.parse(JSON.stringify(this.orderInfo.goodsReceipt));
                this.sendForm.goodsReceiptRemark = JSON.parse(JSON.stringify(this.orderInfo.goodsReceiptRemark));
                this.sendForm.goodsReceiptDate = JSON.parse(JSON.stringify(this.orderInfo.goodsReceiptDate));
                let date = formatDate(new Date(),'yyyy-MM-dd')
                this.sendForm.goodsReceiptDate = this.sendForm.goodsReceiptDate ? this.sendForm.goodsReceiptDate : date
                this.sendForm.deliverId = this.deliverId;
                this.dialogVisible2 = true;
                console.log(this.sendForm)
            },

            //关闭收货
            handleClose2(){
                this.dialogVisible2 = false;
                this.$refs.sendForm.clearValidate();
            },

            //提交收货信息
            handleConfirm2(){
                this.$refs.sendForm.validate((valid) => {
                    if (valid) {
                        this.btnLoading2 = true;
                        let data = JSON.parse(JSON.stringify(this.sendForm));
                        postDeliverVoucher(data).then(()=>{
                            this.btnLoading2 = false;
                            this.handleClose2();
                            this.getPageInfo();
                        }).catch(()=>{
                            this.btnLoading2 = false;
                        })
                    }
                })
            },

            //编辑司机信息
            showDetail(){
                this.dialogVisible = true;
                if(this.orderInfo.sendType != '自提'){
                    this.quitForm.driverName = this.orderInfo.driverName;
                    this.quitForm.driverPhone = this.orderInfo.driverPhone;
                    this.quitForm.driverCardNo = this.orderInfo.driverCardNo;
                    this.quitForm.remark = this.orderInfo.driverRemark;
                    this.quitForm.driverChargeUserId = this.orderInfo.driverChargeUserId && this.orderInfo.driverChargeUserId != '' ? this.orderInfo.driverChargeUserId :this.userId;
                }else{
                    this.quitForm.driverId = this.driverList[0] ? this.driverList[0].driverId : null;
                }

            },
            //关闭司机信息
            handleClose(){
                this.dialogVisible = false;
                this.$refs.quitForm.clearValidate();
            },

            //提交编辑司机信息
            handleConfirm(){
                this.$refs.quitForm.validate((valid) => {
                    if (valid) {
                        this.btnLoading = true;
                        let data = {};
                        data.deliverId = this.deliverId;
                        if(this.orderInfo.sendType == '自提'){
                            data.driverId = this.quitForm.driverId;
                        }else{
                            data.driverName = this.quitForm.driverName;
                            data.driverPhone = this.quitForm.driverPhone;
                            data.driverCardNo = this.quitForm.driverCardNo;
                            data.driverChargeUserId = this.quitForm.driverChargeUserId;
                            data.remark = this.quitForm.remark;
                        }

                        deliverDeliverSet(data).then(()=>{
                            this.btnLoading = false;
                            this.handleClose();
                            this.getPageInfo();
                        }).catch(()=>{
                            this.btnLoading = false;
                        })
                    }
                })
            },

            //显示费用信息
            showFeiYongDetail(){
              if(this.orderInfo.isYunlianDeliver == 99){ //外贸
                this.dialogVisible10 = true;
                this.feiYongForm10.actualFreightTax = this.orderInfo.actualFreightTax;
                this.feiYongForm10.remark = this.orderInfo.expressRemark;
                this.feiYongForm10.costVoucher =  JSON.parse(JSON.stringify(this.orderInfo.costVoucher));
                this.feiYongForm10.freightType = 'sale'
              }else{
                this.dialogVisible3 = true;
                this.feiYongForm.actualFreight = this.orderInfo.actualFreight;
                this.feiYongForm.driverExpress = this.orderInfo.driverExpress;
                this.feiYongForm.remark = this.orderInfo.expressRemark;
                this.feiYongForm.costVoucher =  JSON.parse(JSON.stringify(this.orderInfo.costVoucher));
                this.feiYongForm.payeeUsername = this.orderInfo.payeeUsername;
                this.feiYongForm.freightType = this.orderInfo.freightType;
                this.feiYongForm.yunManManSn = this.orderInfo.yunManManSn;
                this.feiYongForm.orderInputFreight = parseFloat(this.orderInfo.orderInputFreight);
                this.feiYongForm.isHasBill = this.orderInfo.isHasBill == 1 ? true : false
              }

            },
            //关闭费用信息
            handleClose3(){
                this.dialogVisible3 = false;
                this.$refs.feiYongForm.clearValidate();
            },

            //提交编辑费用信息
            handleConfirm3(){
                this.$refs.feiYongForm.validate((valid) => {
                    if (valid) {
                        this.btnLoading3 = true;
                        let data = {};
                        data.deliverId = this.deliverId;
                        data.actualFreight = this.feiYongForm.actualFreight;
                        data.driverExpress = this.feiYongForm.driverExpress;
                        data.remark = this.feiYongForm.remark;
                        data.costVoucher = this.feiYongForm.costVoucher;
                        data.payeeUsername = this.feiYongForm.payeeUsername;
                        data.freightType = this.feiYongForm.freightType;
                        data.yunManManSn = this.feiYongForm.yunManManSn;
                        data.diffFreightType = this.feiYongForm.diffFreightType;
                        data.isHasBill = this.feiYongForm.isHasBill ? 1 : 0;
                        expressDeliverSet(data).then(()=>{
                            this.btnLoading3 = false;
                            this.handleClose3();
                            this.getPageInfo();
                        }).catch(()=>{
                            this.btnLoading3 = false;
                        })
                    }
                })
            },


            //显示费用类型
            showFeiYongDetail2(type){
                this.dialogVisible7 = true;
                this.editType = type;
                this.feiYongForm2[type] = this.orderInfo[type]
                // this.feiYongForm2.freightType = this.orderInfo.freightType;
                // this.feiYongForm2.diffFreightType = this.orderInfo.diffFreightType;
            },
            //关闭费用类型
            handleClose4(){
                this.dialogVisible7 = false;
                this.$refs.feiYongForm2.clearValidate();
            },

            //提交编辑费用类型
            handleConfirm4(){
                this.$refs.feiYongForm2.validate((valid) => {
                    if (valid) {
                        this.btnLoading4 = true;
                        let data = {};
                        data.deliverId = this.deliverId;
                        if(this.editType == 'freightType'){
                            data.freightType = this.feiYongForm2.freightType;
                        }else if(this.editType == 'diffFreightType'){
                            data.diffFreightType = this.feiYongForm2.diffFreightType;
                        }
                        changeFreightType(data).then(()=>{
                            this.btnLoading4 = false;
                            this.handleClose4();
                            this.getPageInfo();
                        }).catch(()=>{
                            this.btnLoading4 = false;
                        })
                    }
                })
            },


            goBlack(){
                this.$router.go(-1)
            },

            //获取合同详情
            getPageInfo(){
              this.loading = true;
              deliverBill({ deliverId: this.$route.query.id }).then(res => {
                this.orderInfo = res;
                console.log('this.orderInfo123',this.orderInfo);
                    if(this.type == 'edit' || this.type == 'caiWu' || this.orderInfo.isAdmin == 1){
                        this.logTab = '1';
                        this.handleSelectLog('1');
                    }else if(this.type == 'see'){
                        this.logTab = '2';
                        this.handleSelectLog('2');
                    }
                    if(this.orderInfo.ymmOrderId){
                      // this.$refs.trajectoryMap2.showMap(this.orderInfo.ymmOrderId,this.orderInfo.ymmOrderState);
                    }
                    this.loading = false;
                });
            },

            //获取客户配置
            getCustomerSettingList(){
                getCustomerSetting().then((res)=>{
                    res.forEach((el)=>{
                        if(el.cdtCode == 'payee_type'){
                            this.shouKuanList = el.data
                        }
                    });
                })
            },
        }
    }
</script>

<style  lang="scss" scoped>
    .avatar-uploader{
        margin-bottom:10px;
        display:block;
        width:80px;
        height:80px;
        border:1px solid #DCDFE6;
        text-align: center;
        line-height: 80px;
    }
    .detail-form{
        .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
            margin-bottom:0px;
        }
    }

    .detail-container {
        width: 90%;
        padding: 20px 20px 20px 20px;
        margin: 20px auto;
        .el-card__header{
            background: #f8f8f8;
            .kehu-name{
                display: inline-block;
                font-size:14px;
                vertical-align: middle;
            }
            .kehu-label{
                font-size:12px;
                vertical-align: middle;
                display: inline-block;
                margin-left:15px;
                color: #409eff;
                background: #ecf5ff;
                border: 1px solid #b3d8ff;
                height:24px;
                line-height: 24px;
                padding:0 10px;
                border-radius: 5px;
            }
            .kehu-info{
                text-align: right;
                font-size: 12px;
                color:#333;
                line-height: 20px;
                span{
                    padding-left:16px;
                }
            }
        }
        .operate-container {
            background: #F2F6FC;
            height: 80px;
            margin: -20px -20px 0;
            line-height: 80px;
        }
    }
    .price-block{
        font-size:12px;
        line-height:30px;
        .lab{
            display: inline-block;
            width:100px;
            text-align: right;
        }
        .text{
            display: inline-block;
        }
    }
    #print-div{
        font-size:14px;
        font-family: "Microsoft YaHei";
        color:#000;
        .title{
            font-size:28px;
            font-weight: bold;
            text-align: center;
            line-height: 40px;
        }
        .paper-top{
            margin-top:20px;
            line-height: 20px;
        }
        .good-table{
            margin-top:0px;
            table{
                border-left:1px solid #000;
                border-bottom:1px solid #000;
                td,th{
                    font-weight: normal;
                    border-right:1px solid #000;
                    border-top:1px solid #000;
                    padding:5px 10px;
                    line-height: 20px;
                }
            }
        }
        .paper-bottom{
            margin-top:0px;
            line-height: 20px;
        }
    }
</style>
